<template>
   <div>
      <!-- 1.动态class的使用 -->
        <dynamicClassVue></dynamicClassVue>

        <el-dropdown>
      <el-button type="primary">
        更多菜单<i class="el-icon-arrow-down el-icon--right"></i>
      </el-button>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item>黄金糕</el-dropdown-item>
        <el-dropdown-item>狮子头</el-dropdown-item>
        <el-dropdown-item>螺蛳粉</el-dropdown-item>
        <el-dropdown-item>双皮奶</el-dropdown-item>
        <el-dropdown-item>蚵仔煎</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>

    <div class="gradient-text">我是中国人</div>

      <!-- 下拉树 -->
     <el-select
          v-model="saveForm.upResId"
          clearable
          placeholder="请选择"
          @clear="handleClear"
          ref="selectUpResId"
        >
          <!-- // 设置一个隐藏的下拉选项
      // 如果不设置一个下拉选项，下面的树形组件将无法正常使用 -->
          <el-option hidden  :value="saveForm.upResId" :label="upResName">
          </el-option>
          <!-- // 设置树形组件
        是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。
        // 是否在点击节点的时候选中节点，默认值为 false，即只有在点击复选框时才会选中节点。
          // 节点被点击时的回调 -->
          <el-tree
            :data="data"
            :props="defaultProps"
            :expand-on-click-node="false"
            :check-on-click-node="true"
            @node-click="handleNodeClick"
          >
          </el-tree>
        </el-select>


      <!-- 复杂表格设计 -->
      <el-table
            :data="rewardData"
            border
            :span-method="rewardSpanMethod"
            :header-cell-style="rewardHeaderStyle"
            stripe
          >
            <el-table-column label="样例数据日期" header-align="center" width="190px">
              <el-table-column
                label="hideHeader1"
                prop="hide1"
                width="40px"
              ></el-table-column>
              <el-table-column
                label="hideHeader2"
                prop="hide2"
                width="40px"
              ></el-table-column>
            </el-table-column>
            <el-table-column
              prop="name"
              width="190px"
              label="奖励名称"
              align="center"
              header-align="center"
            ></el-table-column>
            <el-table-column
              prop="grandMoney"
              label="一等奖"
              align="center"
              header-align="center"
            ></el-table-column>
            <el-table-column
              prop="patentGoldMoney"
              label="二等奖"
              align="center"
              header-align="center"
            ></el-table-column>
            <el-table-column
              width="140px"
              label="备注"
              align="center"
              header-align="center"
              prop="govermentRemark"
            ></el-table-column>
          </el-table>


   </div>
</template>

<script>
import dynamicClassVue from '@/components/konwledgeTest/dynamic-class.vue'
export default {
  components: { dynamicClassVue },
   data() {
     return {
    rewardData: [
        {
          hide1: "短篇小说",
          name: "西游记",
          grandMoney: 100,
          patentGoldMoney: 80,
          govermentRemark:
            "哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈全是我的哈哈哈哈",
        },
        {
          name: "红楼梦",
          grandMoney: 100,
          patentGoldMoney: 80
        },
        {
          name: "水浒传",
          grandMoney: 100,
          patentGoldMoney: 80
        },
        {
          name: "三国演义",
          grandMoney: 100,
          patentGoldMoney: 80
        },
        {
          name: "如果世上没有猫",
          grandMoney: 100,
          patentGoldMoney: 80
        },
        {
          name: "第七天",
          grandMoney: 100,
          patentGoldMoney: 80
        },
      ],
       saveForm: {
        upResId: '',
      },
      upResName: '',
      value: '',
      options: [{
        value: '选项1',
        label: '黄金糕'
      }],
      data: [{
        resId: 1,
        name: '一级 1',
        children: [{
          resId: 11,
          name: '二级 1-1',
          children: [{
            name: '三级 1-1-1'
          }]
        }]
      }, {
        resId: 2,
        name: '一级 2',
        children: [{
          resId: 22,
          name: '二级 2-1',
          children: [{
            resId: 221,
            name: '三级 2-1-1'
          }]
        }, {
          resId: 23,
          name: '二级 2-2',
          children: [{
            resId: 224,
            name: '三级 2-2-1'
          }]
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
    };
  },
  methods: {
      rewardSpanMethod({ rowIndex, columnIndex }) {
      if (columnIndex == 0 || columnIndex == 1 || columnIndex == 5) {
        if (rowIndex == 0) {
          return [6, 1]  //合并的行数，合并的列数
        } else {
          return [0, 0]
        }
      }
    },
    rewardHeaderStyle({ rowIndex, columnIndex }) {
      if (rowIndex == 1) {
        if (columnIndex == 0 || columnIndex == 1) {
          return { display: "none" };
        }
      }
    },
    }
   }
</script>

<style>
.gradient-text {
  font-size: 20px;
  font-weight: 600;
  background-image: linear-gradient(to bottom, #FFFFFF, #9BE2FF,#33CBFF);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
</style>
